<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/Zcool-home(complete).css">
    <title>Zcool站酷</title>
</head>
<style>
    #nav-right .login {
        width: 40px;
        background-color: #fdd100;
        z-index: 9999;
        border-top: black solid 1px;
    }
    
    #nav-right .more li {
        font-size: 14px;
        border: black solid 1px;
        border-top: none;
    }
    
    #nav-more .more .login:hover {
        display: block;
    }
</style>

<body>
    <div id="mian">
        <!-- 头部 --->
        <div id="header">
            <div id="nav-logo">
                <img src="./image/logo.svg" alt="">
            </div>
            <div id="nav-right">
                <div class="download">
                    <a href="#">
                        <p>下载APP</p>
                    </a>
                </div>
                <div class="more">
                    <img src="./image/more.png" alt="">
                    <ul class="login">
                        <li><a href="./html/Zcool--login(complete).html">登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 功能区 -->
        <div id="function">
            <div class="function1">
                <a href="./html/Zcool-activity（complete).html"><img src="./image/function1.jpg" alt="">
                    <p>活动</p>
                </a>
            </div>
            <div class="function2">
                <a href="./html/recruitment.html"><img src="./image/function2.jpg" alt="">
                    <p>招聘</p>
                </a>
            </div>
            <div class="function3">
                <a href="./html/event.html"><img src="./image/function3.jpg" alt="">
                    <p>赛事</p>
                </a>
            </div>
            <div class="function4">
                <a href="#"><img src="./image/function4.jpg" alt="">
                    <p>站酷海洛</p>
                </a>
            </div>
        </div>
        <!-- 首页推荐 -->
        <div id="hot">
            <h1>首页推荐</h1>
        </div>
        <!-- 首页推荐的内容 -->
        <div id="content">
            <!-- 一 -->
            <div id="hot-all">
                <div class="hot-left">
                    <li>
                        <a href="#"><img src="./image/01.jpg" alt=""></a>
                    </li>
                </div>
                <div class="hot-right">
                    <h2>插画合集(二)-ORIGINAL...</h2>
                    <div class="p">
                        <p class="name">SAD_et</p>
                        <li>
                            <p class="eye"><img src="./image/eye.jpg" alt=""> 1891</p>
                            <p class="zan"><img src="./image/zan.jpg" alt=""> 180</p>
                        </li>
                    </div>
                </div>
            </div>
            <!-- 二 -->
            <div id="hot-all">
                <div class="hot-left">
                    <li>
                        <a href="#"><img src="./image/01.jpg" alt=""></a>
                    </li>
                </div>
                <div class="hot-right">
                    <h2>浅谈图表编辑系统的构建</h2>
                    <div class="p">
                        <p class="name">SAD_et</p>
                        <li>
                            <p class="eye"><img src="./image/eye.jpg" alt=""> 1891</p>
                            <p class="zan"><img src="./image/zan.jpg" alt=""> 180</p>
                        </li>
                    </div>
                </div>
            </div>
            <!-- 三 -->
            <div id="hot-all">
                <div class="hot-left">
                    <li>
                        <a href="#"><img src="./image/01.jpg" alt=""></a>
                    </li>
                </div>
                <div class="hot-right">
                    <h2>插画合集(二)-ORIGINAL...</h2>
                    <div class="p">
                        <p class="name">SAD_et</p>
                        <li>
                            <p class="eye"><img src="./image/eye.jpg" alt=""> 1891</p>
                            <p class="zan"><img src="./image/zan.jpg" alt=""> 180</p>
                        </li>
                    </div>
                </div>
            </div>
            <!-- 四 -->
            <div id="hot-all">
                <div class="hot-left">
                    <li>
                        <a href="#"><img src="./image/01.jpg" alt=""></a>
                    </li>
                </div>
                <div class="hot-right">
                    <h2>插画合集(二)-ORIGINAL...</h2>
                    <div class="p">
                        <p class="name">SAD_et</p>
                        <li>
                            <p class="eye"><img src="./image/eye.jpg" alt=""> 1891</p>
                            <p class="zan"><img src="./image/zan.jpg" alt=""> 180</p>
                        </li>
                    </div>
                </div>
            </div>
            <!-- 五 -->
            <div id="hot-all">
                <div class="hot-left">
                    <li>
                        <a href="#"><img src="./image/01.jpg" alt=""></a>
                    </li>
                </div>
                <div class="hot-right">
                    <h2>插画合集(二)-ORIGINAL...</h2>
                    <div class="p">
                        <p class="name">SAD_et</p>
                        <li>
                            <p class="eye"><img src="./image/eye.jpg" alt=""> 1891</p>
                            <p class="zan"><img src="./image/zan.jpg" alt=""> 180</p>
                        </li>
                    </div>
                </div>
            </div>
            <!-- 六 -->
            <div id="hot-all">
                <div class="hot-left">
                    <li>
                        <a href="#"><img src="./image/01.jpg" alt=""></a>
                    </li>
                </div>
                <div class="hot-right">
                    <h2>插画合集(二)-ORIGINAL...</h2>
                    <div class="p">
                        <p class="name">SAD_et</p>
                        <li>
                            <p class="eye"><img src="./image/eye.jpg" alt=""> 1891</p>
                            <p class="zan"><img src="./image/zan.jpg" alt=""> 180</p>
                        </li>
                    </div>
                </div>
            </div>
            <!-- 七 -->
            <div id="hot-all">
                <div class="hot-left">
                    <li>
                        <a href="#"><img src="./image/01.jpg" alt=""></a>
                    </li>
                </div>
                <div class="hot-right">
                    <h2>插画合集(二)-ORIGINAL...</h2>
                    <div class="p">
                        <p class="name">SAD_et</p>
                        <li>
                            <p class="eye"><img src="./image/eye.jpg" alt=""> 1891</p>
                            <p class="zan"><img src="./image/zan.jpg" alt=""> 180</p>
                        </li>
                    </div>
                </div>
            </div>
            <!-- 八 -->
            <div id="hot-all">
                <div class="hot-left">
                    <li>
                        <a href="#"><img src="./image/01.jpg" alt=""></a>
                    </li>
                </div>
                <div class="hot-right">
                    <h2>插画合集(二)-ORIGINAL...</h2>
                    <div class="p">
                        <p class="name">SAD_et</p>
                        <li>
                            <p class="eye"><img src="./image/eye.jpg" alt=""> 1891</p>
                            <p class="zan"><img src="./image/zan.jpg" alt=""> 180</p>
                        </li>
                    </div>
                </div>
            </div>
            <!-- 九 -->
            <div id="hot-all">
                <div class="hot-left">
                    <li>
                        <a href="#"><img src="./image/01.jpg" alt=""></a>
                    </li>
                </div>
                <div class="hot-right">
                    <h2>插画合集(二)-ORIGINAL...</h2>
                    <div class="p">
                        <p class="name">SAD_et</p>
                        <li>
                            <p class="eye"><img src="./image/eye.jpg" alt=""> 1891</p>
                            <p class="zan"><img src="./image/zan.jpg" alt=""> 180</p>
                        </li>
                    </div>
                </div>
            </div>
            <!-- 十 -->
            <div id="hot-all">
                <div class="hot-left">
                    <li>
                        <a href="#"><img src="./image/01.jpg" alt=""></a>
                    </li>
                </div>
                <div class="hot-right">
                    <h2>插画合集(二)-ORIGINAL...</h2>
                    <div class="p">
                        <p class="name">SAD_et</p>
                        <li>
                            <p class="eye"><img src="./image/eye.jpg" alt=""> 1891</p>
                            <p class="zan"><img src="./image/zan.jpg" alt=""> 180</p>
                        </li>
                    </div>
                </div>
            </div>
            <div id="look">
                <a href="#">
                    <h3>查看更多</h3>
                </a>
            </div>
        </div>
        <!-- 底部 -->
        <div id="footer">
            <div id="footer-logo"><img src="./image/logo.svg" alt="">
            </div>
            <div class="footer-title">
                <h4>打开站酷发现更好的设计</h4>
            </div>
            <div id="footer-download">
                <p>下载APP</p>
            </div>
            <div id="APP-open">
                <p>APP内打开</p>
            </div>
            <div id="footer-down">
                <p>opyright© 2006 - 2021 ZCOOL</p>
            </div>
        </div>
    </div>
</body>

</html>